import React, {FC, useEffect, useState} from 'react';
import {Button, Card, Checkbox, Form, Input, Space} from "antd";

interface ComplexFormDemoProps {
}

const ComplexFormDemo: FC<ComplexFormDemoProps> = (props) => {
    const {children} = props;
    const [jsonDataStr, setJsonDataStr] = useState<string>('');

    useEffect(() => {
        console.log('ComplexFormDemo 组件挂载完毕!');
    }, []);

    const onFinish = (values: any) => {
        console.log('Success:', values);
        const tmp = JSON.stringify(values);
        setJsonDataStr(tmp)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    console.log('ComplexFormDemo 组件render!');
    return (
        <div>
            <Space direction="vertical" style={{width: '100%'}}>
                <Card>
                    <h2>复杂表单参数</h2>
                    <small>包括:普通参数,对象参数,数组参数 <a href={'https://ant-design.gitee.io/components/form-cn/#NamePath'}
                                                target={'_blank'}>Ant
                        Design的NamePath</a></small>
                </Card>
                <Card>
                    <Form
                        name="basic"
                        initialValues={{remember: true}}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="姓名"
                            name="name"
                            rules={[{required: true, message: '请输入姓名!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="年龄"
                            name="age"
                            rules={[{required: true, message: '请输入年龄!'}]}
                        >
                            <Input type={"number"}/>
                        </Form.Item>

                        <Form.Item
                            label="省份"
                            name={["addr", "province"]}
                            rules={[{required: true, message: '请选择省份!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="城市"
                            name={["addr", "city"]}
                            rules={[{required: true, message: '请选择城市!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="爱好1"
                            name={["hobby", "ball", 0]}
                            rules={[{required: true, message: '请选择爱好!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="爱好2"
                            name={["hobby", "ball", 1]}
                            rules={[{required: true, message: '请选择爱好!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="昵称1"
                            name={["other", "test", 0, "nickname"]}
                            rules={[{required: true, message: '请输入昵称!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="生日1"
                            name={["other", "test", 0, "birthday"]}
                            rules={[{required: true, message: '请输入生日!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="昵称2"
                            name={["other", "test", 1, "nickname"]}
                            rules={[{required: true, message: '请输入昵称!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item
                            label="生日2"
                            name={["other", "test", 1, "birthday"]}
                            rules={[{required: true, message: '请输入生日!'}]}
                        >
                            <Input/>
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked">
                            <Checkbox>记住我</Checkbox>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                    {/*此种方式可以防止富文本中的脚本攻击*/}
                    <p dangerouslySetInnerHTML={{__html: jsonDataStr}}></p>
                </Card>
            </Space>
        </div>
    );
};

export default ComplexFormDemo;
